<template>
  <div class="ebook-slide-bookmark">
    <div class="slide-bookmark-title">{{$t('book.bookmark')}} · {{bookmark ? bookmark.length : 0}}</div>
    <scroll class="slide-bookmark-list" :top="48" :bottom="48">
      <div class="slide-bookmark-item"
        v-for="(item, index) in bookmark"
        :key="index"
        @click="displayBookmark(item.cfi)">
        <div class="slide-bookmark-item-icon">
          <div class="icon-bookmark"></div>
        </div>
        <div class="slide-bookmark-item-text">{{item.text}}</div>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from '../common/Scroll'
  import { getBookmark } from '../../utils/localStorage'
  import { ebookMixin } from '../../utils/mixin'
  import { markList } from '../../api/store'

  export default {
    mixins: [ebookMixin],
    components: {
      Scroll
    },
    data() {
      return {
        bookmark: null
      }
    },
    methods: {
      displayBookmark(target) {
        // 在mixin中
        this.display(target, () => {
          this.hideTitleAndMenu()
        })
      }
    },
    mounted() {
      // API获取书签列表
      // markList(this.fileName).then(res => {
      //   console.log('获取书签列表返回', res)
      // })
      console.log('this.fileName:', this.fileName)
      this.bookmark = getBookmark(this.fileName)
      console.log('获取书签列表', this.bookmark)
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";

  .ebook-slide-bookmark {
    width: 100%;
    .slide-bookmark-title {
      width: 100%;
      height: px2rem(58);// 48
      font-size: px2rem(30);// 14
      font-weight: bold;
      padding: px2rem(40) px2rem(40);// 15
      box-sizing: border-box;
      @include left;
    }
    .slide-bookmark-list {
      padding: 0 px2rem(40);// 15
      box-sizing: border-box;
      .slide-bookmark-item {
        display: flex;
        padding: px2rem(40) 0;// 15
        box-sizing: border-box;
        .slide-bookmark-item-icon {
          flex: 0 0 px2rem(54);// 29
          @include left;
          .icon-bookmark {
            width: px2rem(35);// 20
            height: px2rem(35);// 20
            font-size: px2rem(18);// 12
            border-radius: 50%;
            background: #bbb;
            @include center;
          }
        }
        .slide-bookmark-item-text {
          font-size: px2rem(30);// 14
          line-height: px2rem(28);// 15
          max-height: px2rem(78);// 45
          @include ellipsis2(3);
        }
      }
    }
  }
</style>
